<template>
  <div class="chapter">
    <mt-header fixed :title="chapter.title">
      <mt-button  v-show="chapter.prev" slot="left" icon="back" @click="back"></mt-button>
      <mt-button>
        <img src="../assets/settings.png" slot="icon" alt="">
      </mt-button>
      <mt-button  class="right" slot="right" icon="more"  @click="settings=!settings"></mt-button>
    </mt-header>


    <div class="content" v-html="chapter.content" :style="{fontSize:fontSize+'px',paddingTop:settings?'1em':'0'}"></div>
    <div>
      <mt-button  v-show="chapter.prev" slot="left" icon="back" @click="prev"></mt-button>
      <mt-button  class="right" slot="right" icon="back"  @click="next" ></mt-button>
    </div>
    <div class="menus">

      <div class="icons" v-show="settings">
        <img @click="prev" src="../assets/prev.png" >
        <img @click="fontSize--" src="../assets/minus.png" >
        <img @click="fontSize=16"src="../assets/font.png" >
        <img @click="fontSize++" src="../assets/plus.png" >
        <img @click="color =!color" src="../assets/color.png" >
        <img  @click="next" src="../assets/next.png" >
      </div>
      <div v-show="color" class="colors">
        <span class="color-block" v-for="(c,index) in colors" @click="setBg(c,index)" :style="{background:c.bg}"></span>
      </div>
    </div>

  </div>
</template>
<script>
  import fetch from '../utils/fetch'
  import { mapGetters } from 'vuex';
  import Cookies from 'js-cookie'
  export default {
    data(){
      return {
        chapter:{},
        color:false,
        settings:false,
        colors:[
          {color:'#e0e0e0',
            bg:'#333'},
          {color:'rgba(0,0,0,.85)',
            bg:'#c8e8c8'},
          {color:'rgba(0,0,0,.85)',
            bg:'#c3d4e6'}
        ],
        fontSize:Cookies.get('fontSize')||'16'
      }
    },
    created(){
      let index = location.host.indexOf('gakki')>=0?1:0;
      this.$store.dispatch('switchUrl',index);
      this.getChapter();
      document.body.onkeydown=(e) => {
        if(e.keyCode==37){
          this.prev();
        }
        if(e.keyCode==39){
          this.next();
        }
      }
    },
    watch:{
      fontSize(nv){
        if(nv < 12){
          this.fontSize=12
        }
        Cookies.set('fontSize',nv, { expires: 365 });
      },
      settings(nv){
        if(!nv){
          this.color = false;
        }
      }
    },
    computed: {
      ...mapGetters([
        'url'
      ])
    },
    methods:{
      back(){
        this.$router.push(`/novels/${this.$route.params.novelId}`)
      },
      setBg(obj,ind){
        if(document.querySelector('.chapter')){
          document.querySelector('.chapter').style.background = obj.bg;
          document.querySelector('.content').style.color = obj.color
          Cookies.set('colorIndex',ind, { expires: 365 });
        }
      },
      getChapter(){
        fetch.get(`${this.url}novels/${this.$route.params.novelId}/${this.$route.params.chapterId}`).then(resp=>{
          this.chapter = resp.data;
          this.$nextTick(()=>{
            if(Cookies.get('colorIndex')){
              this.setBg(this.colors[Cookies.get('colorIndex')],Cookies.get('colorIndex'))
            }
            window.scrollTo(0,0);
          })
        })
      },
      next(){
        if(this.chapter.next){
          let uri = this.chapter.next.replace('https://','').replace('/novels','').split('/');
          uri.pop();
          uri.shift();
          this.$router.push(`/novels/${uri[0]}/${uri[1]}`)
          this.getChapter()
        }
      },
      prev(){
        if(this.chapter.prev){
          let uri = this.chapter.prev.replace('https://','').replace('/novels','').split('/');
          uri.pop();
          uri.shift();
          this.$router.push(`/novels/${uri[0]}/${uri[1]}`)
          this.getChapter()
        }
      }
    }
  }
</script>
<style scoped>
  .chapter{
    padding: 40px 0 10px;
  }
  .content{
    text-align: left;
    line-height: 1.5;
    padding: 0 5px;
  }
  .icons{
    background: #333;
    opacity: .4;
    padding: 5px 20px 1px;
  }
  .menus{
    position: fixed;
    top: 40px;
    width: 100%;
  }
  .color-block{
    width: 30px;
    display: inline-block;
    height: 30px;
    border: thin solid #fff;
    border-radius: 5px;
    margin: 5px;
  }
  .icons img{
    width: 28px;
  }
  .right{
    transform: rotate(180deg);
  }
</style>
